<%--
  Created by IntelliJ IDEA.
  User: 97990
  Date: 2022/7/21
  Time: 13:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <jsp:include page="/common/head.jsp"></jsp:include>
    <title>主页面</title>
</head>
<body>
<jsp:include page="/common/nav.jsp"></jsp:include>
<div class="container">
    <%--条件查询--%>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-info">
                <div class="panel-heading">条件查询</div>
                <div class="panel-body">

                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">商品名称</label>
                            <div class="col-sm-4">
                                <input type="text" id="productName" class="form-control" placeholder="请输入商品名称">
                            </div>

                            <label class="col-sm-1 control-label">生产日期</label>
                            <div class="col-sm-4">
                                <div class="input-group">
                                    <input type="text" id="startDate" class="form-control" placeholder="请输入起始日期">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                                    <input type="text" id="endDate" class="form-control" placeholder="请输入结束日期">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">商品价格</label>
                            <div class="col-sm-4">
                                <div class="input-group">
                                    <input type="text" id="startPrice" class="form-control" placeholder="请输入起始价格">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                                    <input type="text" id="endPrice" class="form-control" placeholder="请输入结束价格">
                                </div>
                            </div>

                            <label class="col-sm-1 control-label">商品库存</label>
                            <div class="col-sm-4">
                                <div class="input-group">
                                    <input type="text" id="startStock" class="form-control" placeholder="请输入起始库存">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                                    <input type="text" id="endStock" class="form-control" placeholder="请输入结束库存">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">商品品牌</label>
                            <div class="col-sm-4" id="brandSelect">

                            </div>
                        </div>

                        <div class="form-group" id="cateDiv">
                            <label class="col-sm-2 control-label">商品类别</label>
                        </div>
                        <div class="btn-group col-lg-offset-5" role="group">
                            <button type="button" class="btn btn-success" onclick="search();">查询</button>
                            <button type="reset" class="btn btn-warning">重置</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <%--按钮--%>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <button type="button" class="btn btn-primary" onclick="toAdd();">
                    <span class="glyphicon glyphicon-plus"></span> 增加
                </button>
                <button type="reset" class="btn btn-danger" onclick="delBatch();">
                    <span class="glyphicon glyphicon-trash"></span> 批量删除
                </button>
                <button type="reset" class="btn btn-danger" onclick="cleanCache();">
                    <span class="glyphicon glyphicon-trash"></span> 清空商品缓存
                </button>
            </div>
        </div>
    </div>

    <%--列表展示--%>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-success">
                <div class="panel-heading">用户列表</div>

                <div class="panel-body">
                    <table id="myTable" class="display table table-striped table-bordered"  style="width:100%">
                        <thead>
                            <th>选择</th>
                            <th>商品名称</th>
                            <th>商品主图</th>
                            <th>商品价格</th>
                            <th>商品库存</th>
                            <th>生产日期</th>
                            <th>品牌</th>
                            <th>分类</th>
                            <th>是否上架</th>
                            <th>是否推荐</th>
                            <th>是否新品</th>
                            <th>操作</th>
                        </thead>
                        <tfoot class="text-center">
                            <th>选择</th>
                            <th>商品名称</th>
                            <th>商品主图</th>
                            <th>商品价格</th>
                            <th>商品库存</th>
                            <th>生产日期</th>
                            <th>品牌</th>
                            <th>分类</th>
                            <th>是否上架</th>
                            <th>是否推荐</th>
                            <th>是否新品</th>
                            <th>操作</th>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<jsp:include page="/common/script.jsp"></jsp:include>
<script>

    $(function (){
        initDate();
        productTableList();
        brandSelect();
        cateSelect(0);
    })

    function cleanCache(){
        $.ajax({
            type:"post",
            url:"/clean/cache.do",
            data:{"key":"productList"},
            success:function (res){
                if (res.code == 200){
                    alert("清空商品缓存成功！")
                }
            }
        })
    }

    //分类下拉框
    function cateSelect(id,obj){
        //js中这样是直接判断是否有值
        if (obj){
            //$(js对象),此方法将js对象转换为jquery对象
            //parent:获取元素的上一级
            //nextAll:获取同级元素
            //remove:删除
            $(obj).parent().nextAll().remove()
        }

        $.post({
            type:"post",
            url: "/cate/findCateByFatherId.do",
            data: {"id":id},
            success:function(result){
                if (result.code == 200){
                    var v_cate = result.data;
                    if (v_cate.length > 0){
                        var v_html =  '<div class="col-sm-2" >' +//this.value是当前对象的id，this代表自身
                            '<select name="cateSelectName" class="form-control" onchange="cateSelect(this.value,this)">' +
                            '<option value="-1">请选择</option>';

                        for (var i = 0; i < v_cate.length; i++) {
                            v_html += '<option value="'+v_cate[i].id+'">'+v_cate[i].cateName+'</option>'
                        }
                        v_html += '</select></div>';
                        $("#cateDiv").append(v_html);
                    }
                }
            }
        })
    }

    //品牌下拉框
    function brandSelect(){
        $.ajax({
            type:"post",
            url:"/brand/findBrandList.do",
            success:function (res){
                if (res.code == 200){
                    var v_brandList = res.data;
                    var v_html = '<select id="brandSelectName" class="form-control">' +
                        '<option value="-1">请选择</option>';
                    for (let v_brand of v_brandList){
                        v_html += '<option value="'+v_brand.id+'">'+v_brand.brandName+'</option>'
                    }
                    v_html += '</select>';
                    $("#brandSelect").html(v_html);
                }
            }
        })
    }

    //条件查询
    function search(){
        var v_param = {}
        v_param.productName = $("#productName").val();
        v_param.startDate = $("#startDate").val();
        v_param.endDate = $("#endDate").val();
        v_param.startPrice = $("#startPrice").val();
        v_param.endPrice = $("#endPrice").val();
        v_param.startStock = $("#startStock").val();
        v_param.endStock = $("#endStock").val();
        v_param.brand = $("#brandSelectName").val();
        v_param.cate1 = $($("select[name='cateSelectName']")[0]).val();
        v_param.cate2 = $($("select[name='cateSelectName']")[1]).val();
        v_param.cate3 = $($("select[name='cateSelectName']")[2]).val();

        productTable.settings()[0].ajax.data = v_param;
        productTable.ajax.reload();
    }

    //列表展示
    var productTable;
    function productTableList(){
        productTable = $("#myTable").DataTable({
            "language": {
                "url": "/js/DataTables/Chinese.json" // 汉化
            },
            // 是否允许检索
            "searching": false,
            "processing": true,
            "lengthMenu": [3,5,15,20],
            //后台分页
            "serverSide": true,
            // 向后台发送请求的url地址[获取分页列表数据的url地址]
            "ajax": {
                "type":"get",
                "url":"/product/list.do",
            },
            // 将后台响应的json格式的数据，进行渲染render
            // json中的key对应
            "columns": [// 返回数据是对象列表的时候需要使用如下方式与字段一一对应
                {"data": "id",
                    render:function (data){
                        return '<input type="checkbox" name="ids" value="'+data+'"/>'
                    }
                },
                {"data": "productName" },
                {"data": "mainImage",
                    render:function (data){
                        return '<img src="'+data+'" width="50px" height="50px"/>'
                    }
                },
                {"data": "price"},
                {"data": "stock"},
                {"data": "createDate"},
                {"data": "brandName"},
                {"data": "cateName"},
                {"data": "status",
                    render:function (data){
                        return data==1?'上架':'下架';
                    }
                },
                {"data": "recommend",
                    render:function (data){
                        return data==1?'推荐':'非推荐';
                    }
                },
                {"data": "newProduct",
                    render:function (data){
                        return data==1?'新品':'非新品';
                    }
                },
                {"data": "id",
                    render:function (data, type, row, meta){
                    var v_status_text = "";
                    var v_status_color = "";
                    var v_status_icon = "";
                    var v_status_state;
                    var v_status = row.status;
                    if (v_status == 1){
                        //此时是上架  按钮就是下架
                        v_status_text += "下架";
                        v_status_color += "btn btn-danger btn-sm";
                        v_status_icon += "glyphicon glyphicon-upload";
                        v_status_state = 0;
                    }else {
                        //此时是下架  按钮就是上架
                        v_status_text += "上架";
                        v_status_color += "btn btn-success btn-sm";
                        v_status_icon += "glyphicon glyphicon-download";
                        v_status_state = 1;
                    }

                    var v_recommend_text = "";
                    var v_recommend_color = "";
                    var v_recommend_icon = "";
                    var v_recommend_state;
                    var v_recommend = row.recommend;
                    if (v_recommend == 1){
                        //此时是推荐  按钮就是非推荐
                        v_recommend_text += "非推荐";
                        v_recommend_color += "btn btn-danger btn-sm";
                        v_recommend_icon += "glyphicon glyphicon-heart-empty";
                        v_recommend_state = 0;
                    }else {
                        //此时是非推荐  按钮就是推荐
                        v_recommend_text += "推荐";
                        v_recommend_color += "btn btn-success btn-sm";
                        v_recommend_icon += "glyphicon glyphicon-heart";
                        v_recommend_state = 1;
                    }

                    var v_newProduct_text = "";
                    var v_newProduct_color = "";
                    var v_newProduct_icon = "";
                    var v_newProduct_state;
                    var v_newProduct = row.newProduct;
                    if (v_newProduct == 1){
                        //此时是新品  按钮就是非新品
                        v_newProduct_text += "非新品";
                        v_newProduct_color += "btn btn-danger btn-sm";
                        v_newProduct_icon += "glyphicon glyphicon-star-empty";
                        v_newProduct_state = 0;
                    }else {
                        //此时是非新品  按钮就是新品
                        v_newProduct_text += "新品";
                        v_newProduct_color += "btn btn-success btn-sm";
                        v_newProduct_icon += "glyphicon glyphicon-star";
                        v_newProduct_state = 1;
                    }

                        return '<div class="btn-group">'+
                            '<button type="button" class="btn btn-warning btn-sm" onclick="toUpdate(\''+data+'\')"><span class="glyphicon glyphicon-pencil"></span> 编辑</button>'+
                            '<button type="button" class="btn btn-danger btn-sm" onclick="deleteProduct(\''+data+'\')"><span class="glyphicon glyphicon-trash"></span> 删除</button>'+
                            '<button type="button" class="'+v_status_color+'" onclick="updateState(\''+data+'\','+v_status_state+',\'status\')"><span class="'+v_status_icon+'"></span> '+v_status_text+'</button>'+
                            '<button type="button" class="'+v_recommend_color+'" onclick="updateState(\''+data+'\','+v_recommend_state+',\'recommend\')"><span class="'+v_recommend_icon+'"></span> '+v_recommend_text+'</button>'+
                            '<button type="button" class="'+v_newProduct_color+'" onclick="updateState(\''+data+'\','+v_newProduct_state+',\'newProduct\')"><span class="'+v_newProduct_icon+'"></span> '+v_newProduct_text+'</button>'+
                            '</div>';
                    }
                },
            ]
        });
    }

    //修改状态
    function updateState(id,state,flag){
        $.ajax({
            type:"post",
            url:"/product/updateState.do",
            data:{"id":id,"state":state,"flag":flag},
            success:function (res){
                if (res.code==200){
                    search();
                }
            }
        })
    }

    //批量删除
    function delBatch(){
        var idArr = [];
        $("input[name='ids']:checked").each(function (){
            idArr.push(this.value);
        })
        if (idArr.length>0){
            // 证明用户选择了，所以要提醒是否要删除
            bootbox.confirm({
                titile:"提示信息",
                message:"你确定删除吗?",
                buttons: {
                    confirm: {
                        label: '<span class="glyphicon glyphicon-ok"></span>确定',
                        className: 'btn-success'
                    },
                    cancel: {
                        label: '<span class="glyphicon glyphicon-remove"></span>取消',
                        className: 'btn-danger'
                    }
                },
                callback:function (result){
                    if (result){
                        $.post({
                            type:"post",
                            url:"/product/deleteBatch.do",
                            data:{"ids":idArr.join(",")},//join方法将js数组转换为指定符号分割的字符串
                            success:function (result){
                                if (result.code == 200){
                                    // 刷新
                                    search();
                                }
                            }
                        })
                    }
                }
            })
        }else {
            // 没有选择，提醒至少选中一项
            bootbox.alert({
                message: "<span class='glyphicon glyphicon-exclamation-sign'></span>请选择要删除的记录",
                size: 'small',
                title: "提示信息"
            });
        }

    }

    //删除
    function deleteProduct(id){
        bootbox.confirm({
            size:"small",
            titile:"提示框",
            message:"确认删除吗？",
            buttons: {
                confirm: {
                    label: '<span class="glyphicon glyphicon-ok"></span>确定',
                    className: 'btn-success'
                },
                cancel: {
                    label: '<span class="glyphicon glyphicon-remove"></span>取消',
                    className: 'btn-danger'
                }
            },
            callback:function (result){
                if (result){
                    $.ajax({
                        type:"post",
                        url:"/product/delete.do",
                        data:{"id":id},
                        success:function (result){
                            if (result.code == 200){
                                //刷新
                                search();
                            }
                        }
                    })
                }
            }
        })
    }

    //跳转增加
    function toAdd(){
        location.href = "/product/toAdd.do"
    }

    //跳转更新
    function toUpdate(id){
        location.href = "/product/toUpdate.do?id="+id;
    }

    // 初始化日期组件
    function initDate() {
        $('#startDate').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: 'zh-CN',
            showClear: true,
        });
        $('#endDate').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: 'zh-CN',
            showClear: true,
        });
    }

</script>
</body>
</html>
